<template>
	<view>
		<view class="shop">
			<view class="title">商品信息</view>
			<view class="li">
				<view class="shop">
					<image :src="orderDetails.image" lazy-load="true" mode="aspectFill" />

					<view class="msg">
						<view class="name black">{{ orderDetails.goodsName }}</view>
						<view v-for="(item, index) in orderDetails.sku" :key="index">
							<view class="sizr gray " v-if="index == 0">颜色：{{ item.split(':')[1] }}</view>
							<view class="sizr gray " v-if="index == 1">尺码：{{ item.split(':')[1] }}</view>
						</view>
					</view>
				</view>
				<view class="genre">
					共1件
					<view class="price">
						合计：
						<text>¥{{ orderDetails.actualPrice }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="msglist" v-if="orderDetails.orderSn">
			<view class="title">订单信息</view>
			<view class="list">
				<text>订单号</text>
				：{{ orderDetails.orderSn }}
			</view>
			<view class="list">
				<text>下单时间</text>
				：{{ orderDetails.createdTime }}
			</view>
			<view class="list">
				<text>订单状态</text>
				：{{ orderDetails.orderStatus.desp }}
			</view>
		</view>
		<view class="msglist">
			<view class="title">收货信息</view>
			<view class="list">
				<text>收货人</text>
				：{{ orderDetails.contactUser }}
			</view>
			<view class="list">
				<text>收货人电话</text>
				：{{ orderDetails.contactPhone }}
			</view>
			<view class="list">
				<text>收货人地址</text>
				：{{ orderDetails.province }} {{ orderDetails.city }} {{ orderDetails.region }} {{ orderDetails.addrDetail }}
			</view>
		</view>
		<view class="msglist">
			<view class="title">代理信息</view>
			<view class="list">
				<text>下单人</text>
				：{{ orderDetails.buyer }}
			</view>
			<view class="list">
				<text>代理电话</text>
				：{{ orderDetails.mobile }}
			</view>
			<!-- <view class="list">
				<text>上交款</text>
				：{{ orderDetails.upPayment }}
			</view>
			<view class="list">
				<text>上交人</text>
				：{{ orderDetails.parentName }}
			</view> -->
		</view>
		<view class="msglist">
			<view class="title">备注</view>
			<input type="text" v-model="remark" class="remark" />
		</view>
		<view v-if="tongguo">
			<view class="bottom" ><view class="button" @click="sub(1)">审核通过</view></view>
			<view class="bottom"><view class="button refuse" @click="sub(0)">拒绝</view></view>
		</view>
		
	</view>
</template>

<script>
import { uniNavBar, uniIcons } from '@dcloudio/uni-ui';
import order from '../../../servers/agent/order/order.js';
export default {
	components: { uniIcons },
	data() {
		return {
			id: '',
			orderDetails: '',
			remark: '',
			tongguo: true
		};
	},
	onLoad(option) {
		this.id = option.id;
	},
	mounted() {
		// var _this = this;
		// uni.getStorage({
		// 	key: 'orderIdorderclaim',
		// 	success: function(res) {
		// 		_this.id = res.data;

		// 	}
		// });
		this.initData();
	},
	methods: {
		initData() {
			uni.showLoading({
				title: '数据加载中',
				mask: true
			});
			order
				.claimDetils(this.id)
				.then(res => {
					this.orderDetails = res.data;
					var sku = [];
					if (this.orderDetails.productSkuDesp) {
						sku = this.orderDetails.productSkuDesp.split(',');
					}
					this.orderDetails.sku = sku;
					this.orderDetails.image = this.imgCDNUrl + this.orderDetails.goodsImg;
					console.log(this.orderDetails)
					uni.hideLoading();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		sub(e) {
			uni.showLoading({
				title: '数据提交中',
				mask: true
			});
			var orderAudit = {
				auditState: e,
				orderId: this.id,
				remark: this.remark
			};
			order
				.sub(orderAudit)
				.then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						var msg = '';
						uni.showToast({
							title: '操作成功',
							duration: 2000,
							mask: true,
							success() {
								/*页面跳转*/
								uni.redirectTo({
									url: '/pages/agent/order/order'
								});
							}
						});
						if (e == 1) {
							this.tongguo = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		}
	}
};
</script>

<style lang="less" scoped>
.shop {
	padding: 1rpx 20rpx;
	background: #ffffff;
	.title {
		line-height: 28rpx;
		font-size: 28rpx;
		border-left: 5rpx solid #bd3c8c;
		padding-left: 16rpx;
		margin-top: 50rpx;
	}
	.li {
		padding: 50rpx 0;
		border-bottom: 1px solid #e1e1e1;
		.shop {
			position: relative;
			display: flex;
			flex-direction: row;
			image {
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
			}
			.msg {
				width: 431rpx;
				margin-left: 37rpx;
				line-height: 46rpx;
				.name {
					font-size: 28rpx;
					height: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.type {
					font-size: 26rpx;
				}
				.gray {
					color: #999999;
					font-size: 26rpx;
					line-height: 42rpx;
				}
			}
		}
		.genre {
			padding-top: 54rpx;
			text-align: right;
			color: #999999;
			font-size: 26rpx;
			.price {
				display: inline-block;
				color: #333333;
				margin-left: 29rpx;
				text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
	.li:nth-last-child(1) {
		border-bottom: none;
	}
}
.msglist {
	border-top: 26rpx solid #efefef;
	padding: 10rpx 20rpx;
	line-height: 60rpx;
	background: #ffffff;
	.title {
		line-height: 28rpx;
		font-size: 28rpx;
		border-left: 5rpx solid #bd3c8c;
		padding-left: 16rpx;
		margin: 20rpx 0;
	}
	.list {
		font-size: 26rpx;
		color: #999999;
	}
	.remark {
		border: 1px solid #efefef;
		padding: 20rpx;
	}
}
.bottom {
	margin-top: 26rpx;
	padding: 1rpx;
	background: #ffffff;
	.button {
		height: 90rpx;
		line-height: 90rpx;
		margin: 43rpx 20rpx;
		text-align: center;
		color: #ffffff;
		border-radius: 50px;
		font-size: 32rpx;
		background: linear-gradient(90deg, #d2158a, #fc6395);
	}
	.refuse {
		margin: 43rpx 20rpx;
		background: #ffffff;
		border: 1px solid #cecece;
		color: #808080;
	}
}
</style>
